<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ollama 模型测试</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
        }
        .tab-container {
            margin-bottom: 20px;
        }
        .tab-buttons {
            display: flex;
            margin-bottom: 10px;
        }
        .tab-button {
            padding: 10px 20px;
            border: none;
            background-color: #e0e0e0;
            cursor: pointer;
            flex: 1;
            font-size: 16px;
            transition: all 0.3s;
        }
        .tab-button.active {
            background-color: #3498db;
            color: white;
        }
        .tab-button:first-child {
            border-radius: 5px 0 0 5px;
        }
        .tab-button:last-child {
            border-radius: 0 5px 5px 0;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        textarea {
            width: 100%;
            height: 150px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            margin-bottom: 10px;
            resize: vertical;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        .result {
            margin-top: 20px;
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 5px;
            background-color: #f9f9f9;
            min-height: 100px;
            white-space: pre-wrap;
        }
        .loading {
            text-align: center;
            margin: 20px 0;
            display: none;
        }
        .spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border-left-color: #3498db;
            animation: spin 1s linear infinite;
            display: inline-block;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .error {
            color: #e74c3c;
            font-weight: bold;
        }
        .file-input {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Ollama 模型测试页面</h1>
        
        <div class="tab-container">
            <div class="tab-buttons">
                <button class="tab-button active" onclick="showTab('text-tab')">文本输入</button>
                <button class="tab-button" onclick="showTab('file-tab')">文件上传</button>
                <button class="tab-button" onclick="showTab('compare-tab')">模型比较</button>
            </div>
            
            <!-- 文本输入标签页 -->
            <div id="text-tab" class="tab-content active">
                <h2>文本处理</h2>
                <textarea id="text-input" placeholder="请输入要处理的文本内容..."></textarea>
                <button onclick="processText()">使用Ollama处理</button>
                <div class="loading" id="text-loading">
                    <div class="spinner"></div>
                    <p>处理中，请稍候...</p>
                </div>
                <h3>处理结果：</h3>
                <div class="result" id="text-result">结果将显示在这里...</div>
            </div>
            
            <!-- 文件上传标签页 -->
            <div id="file-tab" class="tab-content">
                <h2>文件处理</h2>
                <div class="file-input">
                    <input type="file" id="file-upload">
                </div>
                <button onclick="processFile()">上传并处理</button>
                <div class="loading" id="file-loading">
                    <div class="spinner"></div>
                    <p>处理中，请稍候...</p>
                </div>
                <h3>处理结果：</h3>
                <div class="result" id="file-result">结果将显示在这里...</div>
            </div>
            
            <!-- 模型比较标签页 -->
            <div id="compare-tab" class="tab-content">
                <h2>模型比较</h2>
                <textarea id="compare-input" placeholder="请输入要比较处理的文本内容..."></textarea>
                <button onclick="compareModels()">比较模型</button>
                <div class="loading" id="compare-loading">
                    <div class="spinner"></div>
                    <p>处理中，请稍候...</p>
                </div>
                <h3>Ollama模型结果：</h3>
                <div class="result" id="ollama-result">结果将显示在这里...</div>
                <h3>默认模型结果：</h3>
                <div class="result" id="default-result">结果将显示在这里...</div>
            </div>
        </div>
    </div>

    <script>
        // 显示标签页
        function showTab(tabId) {
            // 隐藏所有标签页
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 取消所有按钮的激活状态
            document.querySelectorAll('.tab-button').forEach(button => {
                button.classList.remove('active');
            });
            
            // 显示选中的标签页
            document.getElementById(tabId).classList.add('active');
            
            // 激活对应的按钮
            const index = ['text-tab', 'file-tab', 'compare-tab'].indexOf(tabId);
            document.querySelectorAll('.tab-button')[index].classList.add('active');
        }
        
        // 处理文本
        function processText() {
            const textInput = document.getElementById('text-input').value.trim();
            if (!textInput) {
                alert('请输入要处理的文本内容');
                return;
            }
            
            const loadingEl = document.getElementById('text-loading');
            const resultEl = document.getElementById('text-result');
            
            loadingEl.style.display = 'block';
            resultEl.textContent = '处理中...';
            
            // 发送请求
            fetch('/ais/api/ollama/process/text', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ textContent: textInput })
            })
            .then(response => response.json())
            .then(data => {
                loadingEl.style.display = 'none';
                if (data.success === false) {
                    resultEl.innerHTML = `<span class="error">错误: ${data.error}</span>`;
                } else {
                    try {
                        // 尝试格式化JSON
                        const jsonData = typeof data.data === 'string' ? JSON.parse(data.data) : data.data;
                        resultEl.textContent = JSON.stringify(jsonData, null, 2);
                    } catch (e) {
                        resultEl.textContent = JSON.stringify(data, null, 2);
                    }
                }
            })
            .catch(error => {
                loadingEl.style.display = 'none';
                resultEl.innerHTML = `<span class="error">请求失败: ${error.message}</span>`;
            });
        }
        
        // 处理文件
        function processFile() {
            const fileInput = document.getElementById('file-upload');
            if (!fileInput.files || fileInput.files.length === 0) {
                alert('请选择要上传的文件');
                return;
            }
            
            const loadingEl = document.getElementById('file-loading');
            const resultEl = document.getElementById('file-result');
            
            loadingEl.style.display = 'block';
            resultEl.textContent = '处理中...';
            
            const formData = new FormData();
            formData.append('file', fileInput.files[0]);
            
            // 发送请求
            fetch('/ais/api/ollama/process/file', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                loadingEl.style.display = 'none';
                if (data.success === false) {
                    resultEl.innerHTML = `<span class="error">错误: ${data.error}</span>`;
                } else {
                    try {
                        // 尝试格式化JSON
                        const jsonData = typeof data.data === 'string' ? JSON.parse(data.data) : data.data;
                        resultEl.textContent = JSON.stringify(jsonData, null, 2);
                    } catch (e) {
                        resultEl.textContent = JSON.stringify(data, null, 2);
                    }
                }
            })
            .catch(error => {
                loadingEl.style.display = 'none';
                resultEl.innerHTML = `<span class="error">请求失败: ${error.message}</span>`;
            });
        }
        
        // 比较模型
        function compareModels() {
            const compareInput = document.getElementById('compare-input').value.trim();
            if (!compareInput) {
                alert('请输入要比较的文本内容');
                return;
            }
            
            const loadingEl = document.getElementById('compare-loading');
            const ollamaResultEl = document.getElementById('ollama-result');
            const defaultResultEl = document.getElementById('default-result');
            
            loadingEl.style.display = 'block';
            ollamaResultEl.textContent = '处理中...';
            defaultResultEl.textContent = '处理中...';
            
            // 发送请求
            fetch('/ais/api/models/compare', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ input: compareInput })
            })
            .then(response => response.json())
            .then(data => {
                loadingEl.style.display = 'none';
                if (data.success === false) {
                    ollamaResultEl.innerHTML = `<span class="error">错误: ${data.error}</span>`;
                    defaultResultEl.innerHTML = `<span class="error">错误: ${data.error}</span>`;
                } else {
                    ollamaResultEl.textContent = data.ollama || '无结果';
                    defaultResultEl.textContent = data.default || '无结果';
                }
            })
            .catch(error => {
                loadingEl.style.display = 'none';
                ollamaResultEl.innerHTML = `<span class="error">请求失败: ${error.message}</span>`;
                defaultResultEl.innerHTML = `<span class="error">请求失败: ${error.message}</span>`;
            });
        }
    </script>
</body>
</html> 